<template>
  <div>
    <top-nav/>
    <div class="box">
      <el-form :model="game" :rules="rules" ref="game" label-width="100px" class="demo-ruleForm">
        <el-form-item label="游戏名" prop="game_name" style="width: 400px;">
          <el-select v-model="game.game_name" placeholder="请选择游戏" style="width: 100%" @change="onChange">
            <el-option label="七星彩" value="qxc"></el-option>
            <el-option label="排列五" value="plw"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="期号" prop="game_issue" style="width: 400px;">
          <el-input v-model="game.game_issue" placeholder="请输入期号"></el-input>
        </el-form-item>
        <el-form-item label="号码" prop="game_number" style="width: 400px;">
          <el-input v-model="game.game_number" placeholder="请输入号码"></el-input>
        </el-form-item>
        <el-form-item label="日期" prop="game_date" style="width: 400px;">
          <el-date-picker
            v-model="game.game_date"
            type="date"
            placeholder="选择日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            style="width: 100%"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <ul>
        <li v-for="(item, index) in result" :key="index">{{ item.cp_issue }} | {{ item.cp_number }} | {{ item.cp_date }}</li>
      </ul>
    </div>
  </div>
</template>
<script>
import topNav from '@/components/topNav'
import axios from 'axios'
export default {
  name: 'add',
  components: { topNav },
  data() {
    return {
      game: {
        game_name: '',
        game_issue: '',
        game_number: '',
        game_date: ''
      },
      rules: {
        game_name: [{ required: true, message: '请选择游戏', trigger: 'change' }],
        game_issue: [{ required: true, message: '请输入期号', trigger: 'change' }],
        game_number: [{ required: true, message: '请输入号码', trigger: 'change' }],
        game_date: [{ required: true, message: '请输入日期', trigger: 'change' }]
      },
      result: [],
      resError: ''
    }
  },
  mounted() {
    // this.getList()

    var per = new function() {
      this.name = 123
      this.age = 789
      return '123'
    }
    console.log(per);

    // axios({
    //   url: `https://www.hd-blog.com/api/test.php`,
    //   method: 'get'
    // }).then(res => {
    //   console.log(res)
    // }).catch(err => {
    //   console.log(err)
    // }).finally(e => {
    //   console.log(e)
    // })
  },
  methods: {
    onSubmit() {
      this.$refs.game.validate((valid) => {
        if (valid) {
          // axios({
          //   url: `http://localhost/cp/add.php?issue=${this.game.game_issue}&number=${this.game.game_number}&date=${this.game.game_date}&game=${this.game.game_name}`,
          //   method: 'get',
          //   headers: {
          //     'Content-Type': 'application/x-www-form-urlencoded'
          //   }
          // }).then(res => {
          //   if (res.data.success) {
          //     this.getList(this.game.game_name)
          //     this.$refs.game.resetFields();
          //     this.$message({
          //       message: '提交成功！',
          //       type: 'success'
          //     })
          //   }
          // })
          axios({
            url: `http://web.hd-blog.com/api/add.php?issue=${this.game.game_issue}&number=${this.game.game_number}&date=${this.game.game_date}&game=${this.game.game_name}`,
            method: 'get',
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            }
          }).then(res => {
            if (res.data.success) {
              this.getList(this.game.game_name)
              this.$refs.game.resetFields(['game_name']);
              this.$message({
                message: '提交成功！',
                type: 'success'
              })
            }
          })
        } else {
          return false;
        }
      });
    },
    getList(e) {
      let games = e === 'qxc' ? 'index' : 'sub-index'
      console.log(games)
      // axios.get(`http://localhost/cp/${games}.php`).then(res => {
      //   if (res.data.success) {
      //     this.result = res.data.data
      //   } else {
      //     this.resError = res.data
      //   }
      // })
      axios.get(`http://web.hd-blog.com/api/${games}.php`).then(res => {
        if (res.data.success) {
          this.result = res.data.data
        } else {
          this.resError = res.data
        }
      })
    },
    onChange(e) {
      console.log(e)
      this.getList(e)
    }
  }
}
</script>
<style lang="scss" scoped>
.box{
  width: 100%;
  max-width: 1200px;
  margin: 20px auto 20px;
  padding: 10px 10px 0;
  box-sizing: border-box;
  background: #fff;
}
</style>
